<template>
  <div>
    根据订单号查询流水记录：
    <el-input style="width: 200px;" placeholder="请输入订单编号" v-model="selTransOrderId"
      @change="selTransOrderById"></el-input>

    资金流水数据统计时间范围：
    <template>
      <el-select @change="changeTimePeriod()" v-model="timePeriod"
        placeholder="请选择" style="width: 120px;">
        <el-option v-for="k in timePeriodList" :key="k.value" :label="k.label" :value="k.value">
        </el-option>
      </el-select>
    </template>

    <div class="test" style="width:100%;height:300px;margin-top: 30px;">
      <div id="myChart" style="width:100%;height:278px;float:left;"></div>
    </div>

    <template>
      <el-table :data="orderTransList" border style="width: 100%;margin-top: 15px;">
        <el-table-column prop="orderId" label="订单编号" width="180">
        </el-table-column>
        <el-table-column prop="transTypeName" label="交易类型" width="120">
        </el-table-column>
        <el-table-column prop="transTime" label="交易时间">
        </el-table-column>
        <el-table-column label="交易金额" width="120">
          <template slot-scope="scope">
            <div>
              {{scope.row.transMoney.toFixed(2)}}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="tradingParty" label="交易方">
        </el-table-column>
        <el-table-column prop="tradingChannel" label="交易渠道">
        </el-table-column>
        <el-table-column prop="tradingStateName" label="交易状态">
        </el-table-column>
        <el-table-column prop="operator" label="操作人">
        </el-table-column>
      </el-table>
    </template>
    <div style="margin-top: 15px;">
      <el-pagination @size-change="sizeTransChange" @current-change="currentTransChange" :current-page="page.current"
        :page-sizes="[1,3,5, 7, 9, 11]" :page-size="page.size" layout="total, sizes, prev, pager, next, jumper"
        :total="page.total">
      </el-pagination>
    </div>


  </div>
</template>

<script>
  export default {
    name: 'test',
    data() {
      return {
        timePeriodList: [{
          value: '0',
          label: '近半月'
        }, {
          value: '1',
          label: '近半年'
        }, {
          value: '2',
          label: '近一年'
        }],

        moneyData: [], //资金数据
        dateData: [], //时间数据
        allMoney: 0, //所有支出金额数据
        myChart: '',
        timePeriod: "0",//统计数据的时间段范围  0  近半月  1  近半年  2  近一年

        selTransOrderId: "", //选择查看订单流水记录的订单id
        orderTransList: [], //订单资金流水记录集合
        page: {}, //分页对象
        pageNum: 1, //初始页数
        pageSize: 5, //初始每页数量
        state: "", //流水记录数据状态
      }
    },
    methods: {
      //改变查询数据统计时间范围
      changeTimePeriod(){
        this.dateData=[]
        this.moneyData=[]
        this.allMoney=0
        this.showMoneyExpend()
      },
      drawLine() {
        // 基于准备好的dom，初始化echarts实例
        this.myChart = this.$echarts.init(document.getElementById('myChart'))
        // 绘制图表
        this.myChart.setOption({
          title: {
            text: '订单资金流水记录统计'+"(总支出"+this.allMoney.toFixed(2)+"￥)", // 主标题
            subtext: this.timePeriod==0?"近半月流水记录":this.timePeriod==1?"近半年流水记录":"近一年流水记录", // 副标题
            x: 'center' // x轴方向对齐方式
          },
          tooltip: {
            trigger: 'axis' // axis   item   none三个值
          },
          xAxis: {
            type: 'category', // 还有其他的type
            data: this.dateData, // x轴数据
            name: '', // x轴名称
            axisLabel: {
              fontSize: 9,
              width: 400
            }
            // x轴名称样式
            // nameTextStyle: {
            //   fontWeight: 600,
            //   fontSize: 18
            // }
          },
          yAxis: {
            type: 'value',
            name: '支出金额/￥' ,// y轴名称
            axisLabel: {
              fontSize: 13,
              width: 400
            }
            // y轴名称样式
            // nameTextStyle: {
            //   fontWeight: 600,
            //   fontSize: 18
            // }
          },
          legend: {
            orient: 'vertical',
            x: 'center',
            y: 'bottom',
            data: ['支出金额'],
          },
          series: [{
            name: '支出金额',
            data: this.moneyData,
            type: 'line'
          }]
        })
      },
      showMoneyExpend() {
        this.$http.post("/order/moneyTrans/showMoneyTrans.site", {
          timePeriod:this.timePeriod
        }).then(resp => {
          if (resp.data.flag) {
            for (var i = 0; i < resp.data.data.length; i++) {
              this.allMoney = this.allMoney + resp.data.data[i].dayMoney
              this.dateData.push(resp.data.data[i].date)
              this.moneyData.push(resp.data.data[i].dayMoney.toFixed(2))
            }
            this.drawLine()
          }
        })
      },



      //根据订单id查询该订单的资金流水记录
      selTransOrderById() {
        this.$http.post("/order/moneyTrans/getAllOrderMoneyTrans.site", {
          orderId: this.selTransOrderId
        }).then(resp => {
          if (resp.data.flag) {
            this.page = resp.data.data
            this.orderTransList = resp.data.data.records
          } else {
            alert(respd.data.message)
          }
        })



        // this.$http.post("/order/moneyTrans/getMoneyTrans.site?orderId="+this.selTransOrderId).then(resp=>{
        //   if(resp.data.flag){
        //     this.page.size=1
        //     this.page.total=1
        //     this.page.current=1
        //     this.page.pages=1
        //     this.page.records=[]
        //     this.orderTransList=[]
        //     this.page.records.push(resp.data.data)
        //     this.orderTransList.push(resp.data.data)
        //   }else{
        //     alert(resp.data.message)
        //   }
        // })
      },
      //每页数量改变
      sizeTransChange(val) {
        this.getOrderTransList(1, val, this.state)
      },
      //页数改变
      currentTransChange(val) {
        this.getOrderTransList(val, this.page.size, this.state)
      },
      getTransList() {
        this.getOrderTransList(this.pageNum, this.pageSize, this.state)
      },
      //获取订单资金流水记录
      getOrderTransList(pageNum, pageSize, state) {
        this.$http.post("/order/moneyTrans/getAllOrderMoneyTrans.site", {
          pageNum: pageNum,
          pageSize: pageSize
        }).then(resp => {
          if (resp.data.flag) {
            this.page = resp.data.data
            this.orderTransList = resp.data.data.records
          }
        })
      }
    },
    created() {
      this.showMoneyExpend()
      this.getTransList()
    }
  }
</script>

<style>
</style>
